<template>
	<view class="u-page">
		<!-- 基本信息 -->
		<view class="u-demo-block" >

			<view class="u-demo-block__content">
				<u--form
					labelPosition="left"
					labelWidth="200rpx"
					:model="userInfo"
					ref="form1"
				>
				<!--	<u-form-item v-for="(item, index) in form.sec1" :key="index" :label="item.name" :required="item.required" borderBottom >
				
						<u-upload v-if="item.type=='upload'"
								:fileList="userInfo[item.key]"
								@afterRead="afterRead"
								@delete="deletePic"
								:name="item.key"
								multiple
								:maxCount="1"
								:width="item.width"
								:height="item.height"
							>
							<image v-if="item.hasbackground" :src="item.background_image" mode="widthFix" :style="item.style"></image>
							</u-upload>
							
					</u-form-item>-->
					<!-- 上传图片 -->
					<u-form-item label="身份证正面" required="true" borderBottom v-if="userInfo.attach_time == null && userInfo.is_old_staff == 1">
						<u-upload 
								:fileList="userInfo.card_image_front"
								:deletable="userInfo.can_edit_image"
								@afterRead="afterRead"
								@delete="deletePic"
								name="card_image_front"
								multiple
								maxCount="1"
								width="350rpx"
								height="210rpx"
							>
							<image src="/static/image/card_front.png" mode="widthFix" style="width: 300rpx;height: 210rpx;"></image>
						</u-upload>
					</u-form-item>
					<u-form-item label="身份证反面" required="true" borderBottom v-if="userInfo.attach_time == null && userInfo.is_old_staff == 1">
						<u-upload 
								:fileList="userInfo.card_image_back"
								:deletable="userInfo.can_edit_image"
								@afterRead="afterRead"
								@delete="deletePic"
								name="card_image_back"
								multiple
								maxCount="1"
								width="350rpx"
								height="210rpx"
							>
							<image src="/static/image/card_back.png" mode="widthFix" style="width: 300rpx;height: 210rpx;"></image>
						</u-upload>
					</u-form-item>
					
					<u-form-item label="征信1-2页" required="true" borderBottom >
						<!-- 上传图片 -->
						<u-upload
								:fileList="userInfo.credit_image1"
								:deletable="userInfo.can_edit_image"
								@afterRead="afterRead"
								@delete="deletePic"
								:sizeType="sizeType"
								name="credit_image1"
								multiple
								maxCount="2"
								width="350rpx"
								height="210rpx"
							>
							<image src="/static/image/icon/photo.png" mode="widthFix" style="width: 300rpx;height: 210rpx;"></image>
							</u-upload>
					</u-form-item>
					<u-form-item label="征信3-4页" required="true" borderBottom >
						<!-- 上传图片 -->
						<u-upload
								:fileList="userInfo.credit_image2"
								:deletable="userInfo.can_edit_image"
								@afterRead="afterRead"
								@delete="deletePic"
								:sizeType="sizeType"
								name="credit_image2"
								multiple
								maxCount="2"
								width="350rpx"
								height="210rpx"
							>
							<image src="/static/image/icon/photo.png" mode="widthFix" style="width: 300rpx;height: 210rpx;"></image>
							</u-upload>
					</u-form-item>
			
					
					<u-form-item label="毕业证" borderBottom >
						<!-- 上传图片 -->
						<u-upload
								:fileList="userInfo.diploma_image"
								:deletable="userInfo.can_edit_image"
								:sizeType="sizeType"
								@afterRead="afterRead"
								@delete="deletePic"
								name="diploma_image"
								multiple
								maxCount="1"
								width="350rpx"
								height="210rpx"
							>
							<image src="/static/image/icon/photo.png" mode="widthFix" style="width: 300rpx;height: 210rpx;"></image>
							</u-upload>
							
					</u-form-item>
					
					<u-form-item label="银行卡" borderBottom >
						<!-- 上传图片 -->
						<u-upload
								:fileList="userInfo.bank_card_image"
								@afterRead="afterRead"
								@delete="deletePic"
								name="bank_card_image"
								multiple
								maxCount="1"
								width="350rpx"
								height="210rpx"
							>
							<image src="/static/image/icon/photo.png" mode="widthFix" style="width: 300rpx;height: 210rpx;"></image>
						
							</u-upload>
					</u-form-item>
					<u-form-item label="开户名" borderBottom >
						<u--input v-model="userInfo.bank_account_name" placeholder="请输入开户名" border="none" style="font-size: 0.8rem;"></u--input>
					</u-form-item>	
					<u-form-item label="银行卡号" borderBottom >
						<u--input v-model="userInfo.bank_card_no" type="number" placeholder="请输入工资卡号" border="none" style="font-size: 0.8rem;"></u--input>
					</u-form-item>	
				
					<u-form-item label="开户银行" borderBottom  @click="showPop1">
						<u--input v-model="userInfo.bank_text" placeholder="请选择开户银行,未找到的开户行请联系人事" border="none" class="bank_text" style="font-size: 0.8rem;"></u--input>
						<lzcPicker ref="lzcPicker1" @change="bindPickerChange3" :pickerList="bankList" pickerTittle='选择开户银行' />
					</u-form-item>	
					
					<u-form-item label="支行名称" borderBottom >
						<u--input v-model="userInfo.bank_opening" placeholder="请输入工资卡支行名称" border="none" style="font-size: 0.8rem;"></u--input>
					</u-form-item>	
					
					<u-form-item label="代收凭证" borderBottom v-if="proveShow">
						<!-- 上传图片 -->
						<u-upload
								:fileList="userInfo.collecting_prove"
								@afterRead="afterRead"
								@delete="deletePic"
								name="collecting_prove"
								multiple
								maxCount="2"
								width="350rpx"
								height="210rpx"
							>
							<image src="/static/image/icon/photo.png" mode="widthFix" style="width: 300rpx;height: 210rpx;"></image>
						
							</u-upload>
					</u-form-item>
				</u--form>
			</view>
			<u-button  v-if="  userInfo.can_edit == 1 || (userInfo.attach_time == null && userInfo.is_old_staff == 1 )"  type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>			
		</view>
		<yfx-tooltip ref="tooltip"></yfx-tooltip>
		<zero-loading v-if="loading == true" type="gear" mask="true" maskOpacity="0.3"></zero-loading>
	</view>
</template>

<script>
	import lzcPicker from '@/components/lzc-picker/lzc-picker.vue'
	export default {
		components: {
			lzcPicker
		},
		data() {
			return {
				loading  : false,
				proveShow:false,
				upBaseUrl:this.$http.baseUrl,
				form : {
					sec1:[
						{type:'upload', 'name': '征信第一页', key: 'credit_image1' , required: true , width : '350rpx' , height : '210rpx' , style : 'width: 350rpx;height: 210rpx;' ,  hasbackground : true , background_image : '/static/image/icon/zhengxin.png'},
						{type:'upload', 'name': '征信第二页', key: 'credit_image2' , required: true , width : '350rpx' , height : '210rpx' , style : 'width: 350rpx;height: 210rpx;' ,  hasbackground : true , background_image : '/static/image/icon/zhengxin.png'},
						{type:'upload', 'name': '银行卡照片', key: 'bank_card_image' , required: true , width : '350rpx' , height : '210rpx' , style : 'width: 350rpx;height: 210rpx;' },
						{type:'upload', 'name': '毕业证照片', key: 'diploma_image' , required: true , width : '350rpx' , height : '210rpx' , style : 'width: 350rpx;height: 210rpx;' },
					],
				},
				sizeType:['original'],
				userInfo:{
					can_edit : 0,
					can_edit_image : 0,
					status : '',
					credit_image1   : [],
					credit_image2   : [],
					bank_card_image : [],
					diploma_image   : [],
					collecting_prove: [],
					bank_card_no    : '',
					bank_opening    : '',
					bank_account_name : '',
					card_image_front : '',
					card_image_back : '',
					bank_text       : '',
					bank_id         : 0,
					charge_confirm_time : null,
					attach_time     : null,
					is_old_staff    : 0,
				},
				bankList:[]
				
			}
		},
		onLoad() {
			this.getUserInfo();	
			this.getBankList();
		},
		methods: {
			applyUpdateBank() {
					let param = this.userInfo;
					this.$http.applyUpdateBank(param).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								complete: function () {
								       // 2秒后关闭 toast 并返回上一页
								       setTimeout(function () {
								       	let pages = getCurrentPages();
								       	let prevPage = pages[pages.length - 2];//上一个页面
								       	//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
								       	prevPage.setData({
								       		 isRefresh: 1 
								       	})
								          	uni.navigateBack(1);
								       }, 2000);
								    }
							});
						
						}else{
							this.$refs.tooltip.open({
								msg: '错误',//标题
								content: res.msg,//提示内容
								showCancel: false//不显示取消按钮
							})
						}
					});
					
				},
			getBankList(){
				this.$http.getBankList({'applet_show':1}).then(res => {
					if (res.code == 1 && res.data) {
						this.bankList = res.data;
					}
				});
			},
			submit() {
					let param = this.userInfo;
					this.$http.saveUserImage(param).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								complete: function () {
								       // 2秒后关闭 toast 并返回上一页
								       setTimeout(function () {
								       	let pages = getCurrentPages();
								       	let prevPage = pages[pages.length - 2];//上一个页面
								       	//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
								       	prevPage.setData({
								       		 isRefresh: 1 
								       	})
								          	uni.navigateBack(1);
								       }, 2000);
								    }
							});
						
						}else{
							if(res.msg == '非本人银行卡请上传代收凭证'){
								this.proveShow = true;
							}
							this.$refs.tooltip.open({
								msg: '错误',//标题
								content: res.msg,//提示内容
								showCancel: false//不显示取消按钮
							})
						}
					});
					
				},
				getUserInfo() {
					let param = {};
					this.$http.getUser(param).then(res => {
						if (res.code == 1) {
							this.userInfo.collecting_prove  = res.data.collecting_prove;
							this.userInfo.bank_account_name = res.data.bank_account_name;
							this.userInfo.status           = res.data.status;
							this.userInfo.can_edit         = res.data.can_edit;
							this.userInfo.can_edit_image   = res.data.can_edit_image;
							this.userInfo.credit_image1    = res.data.credit_image1;
							this.userInfo.credit_image2    = res.data.credit_image2;
							this.userInfo.bank_card_image  = res.data.bank_card_image;
							this.userInfo.diploma_image    = res.data.diploma_image;
							this.userInfo.charge_confirm_time = res.data.charge_confirm_time;
							this.userInfo.bank_card_no     = res.data.bank_card_no;
							this.userInfo.bank_opening     = res.data.bank_opening;
							this.userInfo.is_old_staff     = res.data.is_old_staff;
							this.userInfo.attach_time      = res.data.attach_time;
							this.userInfo.card_image_front = res.data.card_image_front;
							this.userInfo.card_image_back  = res.data.card_image_back;
							this.userInfo.bank_id          = res.data.bank_id;
							this.userInfo.bank_text        = res.data.bank_text;
							this.proveShow                 = res.data.proveShow;							
						}else{
							if(res.code == 401){
								var code = '';
								uni.login({
									provider: 'weixin',
									success: function(logRes) {
										code = logRes.code;
									}
								});
								// 获取code
								
								uni.getUserProfile({
									desc: '作为展示',
									success: res => {
										let param = {
											code: code,
											iv: res.iv,
											encryptedData: res.encryptedData,
											rawData: res.rawData,
											signature: res.signature,
											nickname: res.userInfo.nickName,
											avatar: res.userInfo.avatarUrl,
										};
										that.$http.authorization(param).then(res => {
											uni.hideToast();
											if (res.code == 1) {
												uni.setStorageSync('token', res.data.token);
												uni.setStorageSync('mobile',res.data.mobile?res.data.mobile:'');
												
												this.getUserInfo();
												
											}
										});
									},
									fail: err => {
										console.log('获取失败', err);
									}
								});
								
							}else{
								this.$refs.tooltip.open({
									msg: '提示',//标题
									content: res.msg,//提示内容
									showCancel: false,//不显示取消按钮
									confirm: () => {
										uni.navigateBack({
											delta: 1
										});
									} 
								})
							}
						}
						
						
					})
				},
				
			// 删除图片
				deletePic(event) {
					this.userInfo[`${event.name}`].splice(event.index, 1)
				},
			      // 新增图片
			      async afterRead(event) {
			        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			        let lists = [].concat(event.file)
			        let fileListLen = this.userInfo[`${event.name}`].length
			        lists.map((item) => {
			          this.userInfo[`${event.name}`].push({
			            ...item,
			            status: 'uploading',
			            message: '上传中'
			          })
			        })
			        for (let i = 0; i < lists.length; i++) {
			          const result = await this.uploadFilePromise(lists[i].url)
			          
			          let item = this.userInfo[`${event.name}`][fileListLen]
			          this.userInfo[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			            status: 'success',
			            message: '',
			            url    :result
			          }))
			          fileListLen++;
			        }

			      },
				uploadFilePromise(url) {
					this.loading = true;
					return new Promise((resolve, reject) => {
						let a = uni.uploadFile({
							url: this.upBaseUrl + 'common/uploadImg',
							filePath: url,
							name: 'file',
							header: {
								'TOKEN': uni.getStorageSync('token')
							},
							formData: {},
							success: (res) => {
								setTimeout(() => {
									this.loading = false;
									resolve(JSON.parse(res.data).data.full_url)
								}, 1000)
							}
						});
					})
				},
				showPop1(){
					this.$refs.lzcPicker1.handleShow()
				},
				bindPickerChange3(e){
					this.userInfo.bank_id = e.id;
					this.userInfo.bank_text = e.name;
				},
		}
	}
</script>

<style>
.u-page{
		background: #fff;
		padding:0rpx 20rpx 50rpx
	}
  input {
    font-size: 0.8rem!important; /* 设置你想要的字体大小 */
  }
</style>
